<template>
  <view class="card-box">
    <view style="flex:1;display:flex">
      <view class="head" @click="gotoPagePre">
        <image class="img" :src="props.data.faceUrl" mode="aspectFill"></image>
      </view>
      <view class="content" @click="gotoPagePre">
        <view class="info">
          <view class="name">{{props.data.nickName}}</view>
          <view class="behavior">{{ props.data.content }}</view>
          <view class="time">{{props.data.date}}</view>
        </view>
      </view>
    </view>
    <view class="img-right" v-if="props.type === 'interact'">
      <img :src="props.data.coverUrl.imageUrl + '?x-oss-process=image/resize,m_fill,limit_0,h_80,w_80'" style="width: 100%;height: 100%">
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  data: {
    default: () => ({}),
    type: Object
  },
  type: {
    default: '', // interact互动，follow：关注
    type: String
  }
})
const gotoPagePre = (type) => {
  if (props.type === 'follow') {
    uni.navigateTo({
      url: `/user/center?id=${props.data.customerId}`
    })
  } else if (props.type === 'interact') {
    if (props.data.type === 'image') {
      uni.navigateTo({
        url: `/details/detailImg?id=${props.data.customerVideoId}`
      })
    } else if (props.data.type === 'video') {
      uni.navigateTo({
        url: `/details/detailVideo?id=${props.data.customerVideoId}&type=alone`
      })
    }
  }
}
</script>

<style scoped lang="scss">
.card-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 20rpx;
  border-radius: 20rpx;
  background: #FFF;
  margin-bottom: 10rpx;
  .head{
    width: 80rpx;
    height: 80rpx;
    .img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .content{
    width: 400rpx;
    // display: inline-flex;
    // justify-content: space-between;
    // align-items: center;
    .info{
      padding-left: 20rpx;
      font-size: 24rpx;
      line-height: 24rpx;
      .name{
        font-size: 28rpx;
        color: #333333;
        font-weight: bold;
        line-height: 30rpx;
      }
      .behavior{
        color: #414141;
        margin-top: 20rpx;
        margin-bottom: 10rpx;
      }
      .time{
        color: #999;
      }
    }
  }
  .img-right{
    width: 80rpx;
    height: 80rpx;
    border-radius: 10rpx;
    overflow: hidden;
    align-self: flex-start;
  }
}
</style>
